<template>
  <canvas ref="canvas" class="absolute" />
</template>

<script setup lang="ts">
import useAcross from '@/composables/useAcross'
import { AcrossCanvas, AcrossConfig } from '@/composables/useCanvas/AcrossCanvas'
import useSection from '@/composables/useSection'
import { onMounted, ref } from 'vue'

const canvas = ref<HTMLCanvasElement>()
const { sectionId } = defineProps<{
  sectionId: number
}>()

const { lst_across, all: allAcross } = useAcross()
const { find: findSection, calcCanvasAndHeight } = useSection()

onMounted(async () => {
  await findSection(sectionId)
  await allAcross({ sectionId })

  const parent = canvas.value?.parentNode?.parentNode as any
  const { width, height, startY } = await calcCanvasAndHeight(parent!.offsetWidth, parent!.offsetHeight)

  const lst_acrossConfig: AcrossConfig[] = lst_across.value!.data.map((across) => ({
    acrossName: across.acrossName,
    acrossY: across.acrossY,
    x: JSON.parse(across.xy!)[0],
    y: JSON.parse(across.xy!)[1],
  }))

  const ctx = canvas.value?.getContext('2d')!
  new AcrossCanvas(canvas.value!, ctx, width, height, startY, 40, lst_acrossConfig).draw()
})
</script>
